<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中策</title>
</head>
<body>
    <h1>中策新闻</h1>
    <table id="main_table">

    </table>
    <button id="pre_page_button">上一页</button>
    <button id="next_page_button">下一页</button>
</body>

<script>

    var globalPage = 1

    function getData(page) {
        let xmlhttp = new XMLHttpRequest()
        xmlhttp.open('GET',"http://127.0.0.1:5000/page/"+page,true)
        xmlhttp.send()
        xmlhttp.onreadystatechange = function (){
            data = JSON.parse(xmlhttp.response)
            document.getElementById("main_table").innerHTML = ""
            let add_html = "<tr>\n" +
                "            <td>新闻标题</td>\n" +
                "            <td>日期</td>\n" +
                "        </tr>"
            for(var d in data){
                if(data[d].title == "NaN"){
                    continue;
                }
                add_html += "<tr>" + "<td>" + data[d].title + "</td>" + "<td>"+data[d].date+"</td>" + "</tr>";
            }
            document.getElementById("main_table").innerHTML = add_html
        }

    }
    
    document.getElementById("pre_page_button").onclick = function () {
        if(globalPage == 1){
            document.getElementById("pre_page_button").innerText="已经是第一页了！"
        }else{
            // window.location.href="http://127.0.0.1:5000/page/"+(parseInt(result)-1)
            getData(globalPage-1)
            globalPage = globalPage - 1
        }
        console.log(globalPage)
    };

    document.getElementById("next_page_button").onclick = function () {
        getData(globalPage+1)
        globalPage = globalPage + 1
    };

    getData(globalPage)
</script>
</html>